<template>
  <div class="preview-wrap">
    <Header :resource-detail="resourceDetail" />
    <Cesium v-if="resourceDetail" :resource-detail="resourceDetail" />
    <SwitchImage :resource="resourceDetail" />
  </div>
</template>

<script setup lang="ts">
import Cesium from './components/cesium.vue';
import Header from './components/header.vue';
import { useRoute } from 'vue-router';
import { getResourceDetail, insertResourceViewCount } from '@/api/resource';
import { IResource } from '@/api/resource/types';
import SwitchImage from './components/left-bottom.vue';

defineOptions({
  name: 'SceneDetail',
});

const route = useRoute();
const resourceId = ref<string>('');
const resourceDetail = ref<IResource>({} as IResource);

onMounted(async () => {
  resourceId.value = route.params.id as string;
  await insertResourceViewCount({ params: { resId: resourceId.value } });
  getResourceDetail({ params: { resId: resourceId.value } }).then((res: IResource) => {
    resourceDetail.value = res;
  });
});
</script>

<style lang="less" scoped>
.preview-wrap {
  display: flex;
  flex-direction: column;
  height: 100vh;
  #cesiumContainer {
    flex: 1;
    height: 0px;
  }
}
</style>
